<template>
  <div class="tables-main">
    <div class="table-box">
      <el-table
        style="width: 90%;margin: 10px auto"
        :data="tableData"
         border
        :header-cell-style="{
          background: '#E7F2FF',
          color: 'black',
        }"
        v-loading="loading"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="val" label="期别" width="150" align="center"/>
        <el-table-column prop="templateType" label="报表类型" width="200" align="center"/>
        <el-table-column label="是否超时" width="200" align="center">
        <template #default="scope">
          {{ scope.row.notice? '已超时' : '未超时' }}
        </template>
        </el-table-column>
        <el-table-column prop="deadline" label="审核截至时间" width="180" align="center"/>
        <el-table-column prop="developArea" label="填报人" width="200" align="center" show-overflow-tooltip />
        <el-table-column prop="checkTime" label="审核时间" width="180" align="center"/>
        <el-table-column prop="reportTime" label="上报时间" width="180" align="center"/>
        <el-table-column label="操作" min-width="180" width="auto" fixed="right" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="getCheck(scope.row,'first')">查看</el-button>
            <el-button link type="primary" v-if="scope.row.checkInfoList[0].shState != 2" size="small" @click="passReport(scope.row)">通过</el-button>
            <el-button link type="primary" size="small" style="color: red;" @click="returnReport(scope.row)">退回</el-button>
            <el-button link type="primary" size="small" @click="downReport(scope.row)">导出</el-button>
          </template>
        </el-table-column> 
      </el-table>
    </div>
    <div class="pagination-box">
      <el-pagination
      :total="totals"
      layout="prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" 
    />
    </div>
  </div>
  <digflow :flowlist="showData" :show="showFlow" @digChange="flowChange"/>
  <el-dialog v-model="returnShow" title="退回" width="30%" >
   <span>原因：</span><el-input v-model="returnInfo.reason" autocomplete="off" style="width: 300px" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="returnShow = false">取消</el-button>
        <el-button type="primary" @click="sureReturn">
          退回
        </el-button>
      </span>
    </template>
  </el-dialog> 
</template>
<style lang="scss" scoped>

.tables-main{
  .table-box{
    width: 100%;
  }
  .pagination-box{
      width: 90%;
      margin: 30px auto;
      ::v-deep(.el-pagination){
        float: right;
      }   
}
}

</style>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { findListS,reportFindById,reportcheck,reportExport } from "@/util/api";
import { useRouter } from "vue-router";
import {ElMessageBox,ElMessage} from "element-plus"
//流程组件
import digflow from '../../components/flowDig.vue'
//路由
const router = useRouter();
//等待
const loading:any = ref(false)
//展示流程管理
const showFlow:any = ref(false)
//流程数据
const showData:any = ref([])
//退回原因展示
const returnShow:any = ref(false)
//退回原因
const returnInfo:any=ref({
   id:'',
   shResult: '2',
   reason:''
})

//报表参数
const formDate = ref({
  checkUserId: "",
  createUserId: "",
  developArea: "",
  reportTimeEnd: "", //报表结束时间
  reportTimeStart: "", //报表开始时间
  rState: "2", //报表状态未审批
  state: "1",
  templateType: "", //报表所有类型
  val: "", //?
  currentPage: 1, //第几页
  pageNum: 10, //一页几个
});
//报表总条数
const totals: any = ref(0);
//报表数据
const tableData: any = ref([]);
//获取未审核报表
const getTable = async () => {
  loading.value=true
  let res: any = await findListS(formDate.value);
  // console.log(res);
  if (res.code == 200) {
    tableData.value = res.data.content;
    totals.value = parseInt(res.data.totalElements); 
    loading.value=false
  }
};
//流程管理
const getFlow = (item: any) => {
  reportFindById(item.id).then((res: any) => {
    showData.value = res.data.checkInfoList
    showFlow.value = true
  })
};
//省级编辑
const editReport = (item:any,tabs:any)=>{
  let url = null
  if(item.templateId=='5'){
    url=  router.resolve({
    path: '/dominantCheck',
    query: {
      id: item.id,
      radio1: item.templateId,
      tabs:tabs
    }
    })
  }else if(item.templateId=='4'){
    url=  router.resolve({
    path: '/fourCheck',
    query: {
      id: item.id,
      radio1: item.templateId,
      tabs:tabs,
    }
  })}else if(item.templateId=='100'){
    url= router.resolve({
    path: '/summary',
    query: {
      id: item.id,
      radio1: item.templateId,
      tabs:tabs
    }
  })
  }else if(item.templateId=='101'){
    url= router.resolve({
    path: '/staging',
    query: {
      id: item.id,
      radio1: item.templateId,
      tabs:tabs
    }
  })
  }else if(item.templateId=='102'){
    url= router.resolve({
    path: '/poor',
    query: {
      id: item.id,
      radio1: item.templateId,
      tabs:tabs
    }
  })
  }else{
    url=  router.resolve({
    path: '/check',
    query: {
      id: item.id,
      radio1: item.templateId,
      tabs:tabs
    }
  })
  }
  window.open(url.href);
} 
//关闭流程管理
const flowChange=(e:any):void=>{
  showFlow.value=e
}
//报表查看
const getCheck = (val: any,tabs:any) => {
  let url = null
  if(val.templateId=='5'){
    url=  router.resolve({
    path: '/dominantCheck',
    query: {
      id: val.id,
      radio1: val.templateId,
      isCheck:1,
      tabs:tabs
    }
    })
  }else if(val.templateId=='4'){
    url=  router.resolve({
    path: '/fourCheck',
    query: {
      id: val.id,
      radio1: val.templateId,
      tabs:tabs,
      isCheck:1,
    }
  })}else if(val.templateId=='100'){
    url= router.resolve({
    path: '/summary',
    query: {
      id: val.id,
      radio1: val.templateId,
      isCheck:1,
      tabs:tabs
    }
  })
  }else if(val.templateId=='101'){
    url= router.resolve({
    path: '/staging',
    query: {
      id: val.id,
      radio1: val.templateId,
      isCheck:1,
      tabs:tabs
    }
  })
  }else if(val.templateId=='102'){
    url= router.resolve({
    path: '/poor',
    query: {
      id: val.id,
      radio1: val.templateId,
      isCheck:1,
      tabs:tabs
    }
  })
  }else{
    url=  router.resolve({
    path: '/check',
    query: {
      id: val.id,
      radio1: val.templateId,
      isCheck:1,
      tabs:tabs
    }
  })
  }
  window.open(url.href);
}
//上传文件查看
const checkFiles= (val: any) => {
  let url = null
  url=  router.resolve({
      path: './check',
      query: {
        id: val.id,
        radio1: val.templateId,
        isCheck:1,
        tabs:'second'
      }
    })
    window.open(url.href);
}
//审核通过
const passReport = (val: any) => {
  let data = {
    id: val.checkInfoList[0].id,
    shResult: '1',
    reason: ''
  }
  ElMessageBox.confirm(
    '确定通过?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
     let res:any = await reportcheck(data)
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: '通过成功',
          })
           getTable()
        }
    })
    .catch(() => {
         
    })
}
//退回
const returnReport = (val: any) => {
  returnInfo.value.reason = ""
  returnInfo.value.id = val.checkInfoList[0].id
  returnShow.value = true
}
//确认退回
const sureReturn=()=>{
   reportcheck( returnInfo.value).then((res: any) => {
    if(!res)return
    returnShow.value = false
    getTable()
  })
}
//导出
const downReport = (val: any) => {
    let name = val.name
    reportExport(val.id).then((res: any) => {
      let fileName = name + ".xlsx"
      handleFileError(res, fileName)
    })
  }
  const handleFileError = (res: any, fileName: any) => {
  if (typeof res.data !== 'undefined') {
    if (res.data.type === 'application/json') {
      const reader = new FileReader();
      reader.onload = function () {
        // const message = JSON.parse(reader.result).msg;

      };
      reader.readAsText(new Blob([res.data]));
    }
  } else {
    var downloadUrl = window.URL.createObjectURL(new Blob([res]));
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = downloadUrl;
    a.download = fileName;
    var event = new MouseEvent('click');
    a.dispatchEvent(event);
  }
};
//分页
const handleSizeChange = (val: number) => {
  //   console.log(`${val} items per page`)
  formDate.value.pageNum = val;
  getTable();
};
const handleCurrentChange = (val: number) => {
  //   console.log(`current page: ${val}`)
  formDate.value.currentPage = val;
  getTable();
};
onMounted(() => {
  getTable();
});

//动态添加table背景
const tableRowClassName = ({
  row,
  rowIndex,
}) => {
  if(row.notice){
    return 'warning-row'
  }
}
</script>
<style>
  .el-table .warning-row {
  --el-table-tr-bg-color: rgba(235, 76, 64, 0.1);
}
</style>